@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" href="{{url('css/swiper.min.css')}}">
    <script src="{{url('js/swiper-3.4.2.jquery.min.js')}}"></script>
@endsection

@section('html-body')
    <div class="productex-page">
        <div class="detail-header">
            <div class="my-coins">我的波罗币：@if($userinfo){{$userinfo->coin}}@endif</div>
            <div class="user-name">BOLUOJI</div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="http://img.zcool.cn/community/01ea0657cce2e00000012e7e322bc9.jpg@900w_1l_2o_100sh.jpg" alt=""></div>
                <div class="swiper-slide"><img src="http://img3.imgtn.bdimg.com/it/u=2190077173,3099534786&fm=27&gp=0.jpg" alt=""></div>
                <div class="swiper-slide"><img src="http://img.zcool.cn/community/011de45541fed80000019ae91d7b19.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="select-price">
            <div class="price-item @if($model == 0)active @endif" data-model="0">
                <span class="icon @if($model == 0)bg-all_product_icon @else bg-all_product_icon_not @endif"></span>
                <div class="type-text">
                    全部
                </div>
            </div>
            <div class="price-item @if($model == 100)active @endif" data-model="100">
                <span class=" text-icon">100</span>
                <div class="type-text">
                    100波罗币
                </div>
            </div>
            <div class="price-item @if($model == 50)active @endif" data-model="50">
                <span class="text-icon">50</span>
                <div class="type-text">
                    50波罗币
                </div>
            </div>
        </div>
        <div class="product-container">
            @if(count($all_goods) > 0)
                @foreach($all_goods as $good)
            <div class="product-item">
                <div class="product-img">
                    <img   src="{{route('Api.Image.ShowPX',['id'=>$good->thumb_id,'px'=>'300px'])}}" alt="">
                </div>
                <div class="product-num">{{$good->model}}</div>
                <div class="product-name">{{$good->name}}</div>
                <div class="product-price"><span>{{$good->coin}}</span>波罗币</div>
                <a href="{{route('Home.Goods.goodsDetail')}}?id={{$good->id}}" class="exchange-link">兑换</a>
            </div>
                @endforeach
                @else
                <div class="product-item" style="text-align: center;margin-top: 10px">暂无可选商品</div>
            @endif
        </div>
    </div>
    <script>
        $(document).ready(function () {
            var mySwiper = new Swiper ('.swiper-container', {
                loop: true,
                autoplay : 3000,
                pagination: '.swiper-pagination',
            })

            $('.price-item').click(function () {
                var model = $(this).data('model');
                window.location.href="{{route('Home.Goods.goodsList')}}?model="+model;
            });
        })
    </script>
@endsection